<template>
  <div>
    <!-- 页面头部 -->
    <my-header></my-header>
    <wait  v-if="iswait"></wait>
    <!-- 页面轮播图 -->
    <my-wrap v-if="!iswait&&isshow"></my-wrap>
    <!-- 页面导航 -->
    <my-nav v-if="!iswait&&isshow"></my-nav>
    <!-- 新闻简报 -->
    <!-- <div class="tt-link">
      <div class="pic-box">
        <img src="../../assets/img/news-icon.png" alt="" />
      </div>
      <div class="link-box">
        <a href="#">
          <span class="icon bi bi-chevron-right"></span>
          <span>特仑苏沙漠有机 限量邮寄</span>
        </a>
      </div>
    </div> -->
    <!-- 页面快速选择 -->
    <my-quick v-if="!iswait&&isshow"></my-quick>
    <!-- 页面精品推荐 -->
    <!-- <my-recommend v-if="isRecLoading"></my-recommend> -->
    <!-- 页面商品列表 -->
    <div 
        v-for="item in home.productList"
        v-bind:key="item.id"
        >
        <router-link :to="{path : '/home/detail',query : {id : item.id}}"  v-if="!iswait&&isshow">
        <product-list 
          v-bind:itemObj="item"
          ></product-list>
        </router-link>
     </div>
    <!-- 渲染组件 -->
    <router-view></router-view>
  </div>
</template>

<style lang="less" scoped>
.tt-link {
  height: 50px;
  margin: 5px 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  .pic-box {
    padding: 0 10px;
    img {
      width: 70px;
    }
  }
  .link-box {
    //  background-color: red;
    padding: 0 10px;
    border-left: 1px solid #cccc;
    flex-grow: 1;
    height: 22px;
    line-height: 22px;
    span {
      font-size: 14px;
      color: #666;
      vertical-align: text-top;
    }
    .icon {
      float: right;
    }
  }
}
</style>

<script>
import myHeader from "@/components/myheader";
import myWrap from "@/components/mywrap";
import myNav from "@/components/mynav";
import myQuick from "@/components/myquick";
import myRecommend from "@/components/myrecommend";
import productList from "@/components/productlist";
import wait from "@/components/wait";
import { get } from "@/utils/http";
import { mapState } from "vuex"
export default {
  name: "Home",
  components: {
    myHeader,
    myWrap,
    myNav,
    myQuick,
    myRecommend,
    productList,
    wait
  },
  data() {
    return {
      isRecLoading: false,
      iswait : true,
      isshow : true,
    };
  },
  computed:{
     ...mapState(['home'])
  },
  methods: {
    init() {
      // 编写处理数据的逻辑（promise）
      let getData = (res) => {
        return new Promise((resolve, reject) => {
          if (res) {
            resolve(res);
          }
        });
      };
      // 接口地址：/api/index
      // 请求方式：get
      // 参数： 无
      get("/api/index")
        .then((response) => {
          // 获取后台的数据
          let res = response.data;
          // 判断一下状态
          if (res.status == 200) {
            // 后台程序员设计
            let data = res.data;
            // 返回一个处理数据的promise对象
            return getData(data);
          }
        })
        .then((data) => {
          //  解构赋值(首页轮播图/导航菜单)
          let { banner, menus } = data;
          let arr = [];
          banner.forEach((item) => {
            let obj = {};
            obj.id = item.id;
            obj.src = item.pic;
            arr.push(obj);
          });
          let newarr = [];
          newarr[0] = arr[1];
          newarr[1] = arr[0];
          arr.forEach((item,index) => {
            if(index>1){
              newarr[index] = item;
            }
          })
          // console.log(newarr);
          this.$store.dispatch("home/setBannerAsync", newarr);
          this.$store.dispatch("home/setNavAsync", menus);
          // 返回一个处理数据的promise对象
          return getData(data);
        })
        .then((data) => {
          //  解构赋值（快速选择）
          let {
            info: { fastList },
          } = data;
          let arr2 = [];
          fastList.forEach((item) => {
            let obj = {};
            obj.id = item.id;
            obj.path = item.pic;
            obj.text = item.cate_name;
            arr2.push(obj);
          });
          this.$store.dispatch("home/setFastAsync", arr2);
          // 返回一个处理数据的promise对象
          return getData(data);
        })
        .then((data) => {
          // 解构赋值 （精品推荐）
          let {
            info: { bastBanner }
          } = data;
          let arr3 = [];
          bastBanner.forEach((item) => {
            let obj = {};
            obj.id = item.id;
            obj.path = item.img;
            obj.link = item.link;
            arr3.push(obj);
          });
          // 执行actions下的方法
          this.$store.dispatch("home/setBastBannerAsync", arr3);
          // console.log(bastBanner, "首页组件 先获取数据 1.0 ");
          this.isRecLoading = true;// 数据已经获取 可以渲染组件了
           // 返回一个处理数据的promise对象
          return getData(data);
        })
        .then(
          data=> {
            // 结构赋值（获取首页列表数据）
            // console.log(data.info.bastList);
            let {info: { bastList } } = data;
            // console.log(bastList);
            // 定义空数组
            let arr5 = [];
            // 循环数据
            bastList.forEach(item => {
              let obj = {};
              obj.id = item.id ;
              obj.path = item.image ;
              obj.text = item.store_name ;
              obj.unit_name = item.unit_name ;
              obj.price = item.price ;
              obj.vip_price = item.vip_price ;
              obj.sales = item.sales ;
              arr5.push(obj);
            })
            this.$store.dispatch("home/setProductAsync",arr5);
            this.iswait = false
          }
        )
    },
  },
  created() {
    // 初始化页面
    this.init();
    // ...
    // ...
    // ...
    // ...
    // ...
    // ...
    // ...
    window.onresize = function () {
      // console.log(111)
      location.reload();
    }
  },
  beforeRouteUpdate(to,from,next){
    // console.log(to);
  if(to.path != '/home'){
    this.isshow = false;
  }else{
    this.isshow = true;
  }
    next();
  }
};
</script>
